<template>
  <div class="containter">
    <div class="text-container"></div>
    <div class="more">...</div>
    <div class="content">{{content}}</div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const content = '清热解毒:苦瓜里面含有丰富的苦瓜碱,因此可以起到清热解毒的效果,如果能够接受苦瓜的味道,可以选择凉拌苦瓜食用,能够避免苦瓜的营养丢失。 2、减肥:苦瓜里面含有丰富的膳食纤维,有助于促进肠道蠕动,减少脂肪吸收,从而达到减肥的效果。3、降血糖:苦瓜中含有类似胰岛素的物质,能够帮助降低血糖水平,适合糖尿病患者食用。4、增强免疫力:苦瓜富含维生素C和多种矿物质,有助于增强人体免疫力,提高抵抗力。5、美容养颜:苦瓜中的维生素C具有抗氧化作用,能够延缓衰老,使皮肤更加光滑细腻。';
const isOverflow = ref(false);
const contentRef = ref(null);

onMounted(() => {
  // 检查内容是否溢出
  if (contentRef.value) {
    isOverflow.value = contentRef.value.scrollHeight > contentRef.value.clientHeight;
  }
});
</script>

<style>
.containter{
 background-color: aquamarine; 
 width: 300px;
 height: 150px;

 overflow: hidden;
}
.text-container::before{
  content: '';
  display: block;
  height: 125px;
}
.content{
  margin-top: -125px;
   line-height: 21px;
}
.more{
  float: right;
  line-height: 1;
}
</style>
